Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

302
Views
Interpolar la ruta SVG con "d3-interpolate-path" reaccionar nativo ERROR NaN

Estoy tratando de interpolar y animación SVG en reaccionar nativo, pero de alguna manera obtuve NaN.

Recibo NaN Error.

Aquí está todo el código:

 import React, { Component } from "react"; import Svg, { Path, } from "react-native-svg"; import { interpolatePath } from "d3-interpolate-path"; import { Animated, Modal } from "react-native"; const startPath = "M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6zm10 14.5V20H8v-3.5l4-4 4 4zm-4-5l-4-4V4h8v3.5l-4 4z"; const endPath = "M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"; export default class Animations extends Component { state = { animation: new Animated.Value(0), }; private _path: any; componentDidMount() { const pathInterpolate = interpolatePath(startPath, endPath); this.state.animation.addListener(({ value }) => { const path = pathInterpolate(value); this._path.setNativeProps({ d: path, }); }); Animated.loop(Animated.sequence( [Animated.timing(this.state.animation, { toValue: 1, duration: 500, useNativeDriver: false }), Animated.timing(this.state.animation, { toValue: 0, duration: 500, useNativeDriver: false }), ] )).start() } render() { return ( <Modal transparent={true}> <Animated.View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.5)", alignItems: "center", justifyContent: "center" }}> <Svg width={150} height={150} fill="#000000"> <Path d={startPath} stroke="black" ref={(path) => (this._path = path)} /> </Svg> </Animated.View> </Modal> ); } }

Algunas de las rutas interpoladas son como: "M8.9,6.45L5.9,8.45L5.905,5.45cNaN,NaN,NaN,NaN,3.89,4.005cNaN,NaN,NaN,NaN,-1.1099999999999999,2h4.105h1. 105h7.105cNaN,NaN,1.5,NaN,-1.5,NaNcNaN,NaN,1.495,NaN,-1.505,NaNcNaN,NaN,10.805,8,10.155,8.955cNaN,NaN,NaN,NaN,NaN,NaNh7.9h-1.1 h1.9c5.06,8.345,5.88,8.96,6.84,9.165c0.06,11.095,0.88,11.71,1.84,11.915V10.5V8.75V12.5hNaNh1.5v-1.075v0.675cNaN,NaN,NaN,NaN,NaN ,Yaya"

¿Qué debo hacer?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!